<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--左边的卡片-->
<div class="four wide column m-mobile-hide">
    <!--用户信息区域-->
    <div th:if="${author!=null}" class="ui segments user_info_sidebar menu-info-ctl" th:fragment="sidebar_userinfo"
         style="padding-right: 0 !important;background: #fff;">
        <div class="ui equal width center aligned padded grid">
            <div class="row" style="padding-bottom: 0 !important;">
                <div class="four wide column" style="padding-right: 0 !important;">
                    <a href="#" th:href="@{/article/index/{id}(id=${author.getUserId()})}" class="m-black">
                        <img th:if="${author.getUserHeaderImgUrl()!=null}"
                             class="ui top avatar aligned tiny image medium circular m-img-animate"
                             th:src="@{${author.getUserHeaderImgUrl()}}"/>
                        <div th:if="${author.getUserHeaderImgUrl()==null}" class="m-init-user-avatar"
                             style="width: 55px;height: 55px">
                            <svg t="1604420630232" style="margin: 9px" class="icon" viewBox="0 0 1024 1024"
                                 version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38499" width="38" height="38">
                                <path d="M512 0c113.322667 0 204.8 91.477333 204.8 204.8S625.322667 409.6 512 409.6 307.2 318.122667 307.2 204.8s91.477333-204.8 204.8-204.8z m0 969.386667a491.52 491.52 0 0 1-409.6-219.818667C104.448 613.717333 375.466667 539.306667 512 539.306667c135.850667 0 407.552 74.410667 409.6 210.261333a491.52 491.52 0 0 1-409.6 219.818667z"
                                      fill="#bfbfbf" p-id="38500"></path>
                            </svg>
                        </div>
                    </a>
                </div>
                <div class="twelve wide column grid" style="padding-left: 3px !important;">
                    <div class=" m-margin-bottom">
                        <div style="float: left !important;font-size: 17px" th:text="${author.getUserNickname()}"></div>
                    </div>
                    <div style="clear: both !important;"></div>
                    <div class=" m-margin-bottom"></div>
                    <div  class="row" >
                        <!--<button  class="ui left floated  mini yellow basic button">
                            <a href="#" style="color: orange;font-size: 12px;">私信</a>
                        </button>
                        <button class="ui left floated  mini red basic button">
                            <a href="#" style="color: red;font-size: 12px;">关注</a>
                        </button>-->
                        <a href="#" th:href="@{/article/home/{id}(id=${author.getUserId()})}"
                           style="color: #3399ea;font-size: 12px !important;float: left">TA的个人主页&nbsp;></a>
                    </div>
                </div>
            </div>
            <div class="ui divider user_info_sidebar_divider" style="margin-bottom: 5px !important;margin-top: 5px !important;border-top: none;background: #f5f6f7;"></div>
            <div class="row" style="padding-bottom: 5px !important;padding-top: 5px !important;">
                <div class="column">
                    <a href="#" th:href="@{/article/index/{id}(id=${author.getUserId()})}" th:alt="originalArticleNum" class="m-black">
                        原创
                        <div><strong th:text="${originalArticleNum}">200</strong></div>
                    </a>
                </div>
                <div class="column m-black">
                    粉丝
                    <div><strong th:text="${attentionNumOfMe}">0</strong></div>
                </div>
                <div class="column m-black">
                    喜欢
                    <div> <strong>0</strong></div>
                </div>
                <div class="column m-black">
                    评论
                    <div><strong th:text="${receiveCommentNum}">0</strong></div>
                </div>
            </div>
            <div class="ui divider user_info_sidebar_divider" style="margin-bottom: 5px !important;margin-top: 5px !important;border-top: none;background: #f5f6f7;"></div>
            <div class="row" style="padding-bottom: 5px !important;padding-top: 5px !important;">
                <div class="column m-txt-align-left m-black">
                    等级：<strong><span class="m-margin-left"
                                     th:text="${author.getUserLevel()==null?0:author.getUserLevel()}"></span></strong>
                </div>
                <div class="column m-txt-align-left m-black">
                    访问：<strong><span class="m-margin-left"
                                     th:text="${author.getUserVisit()==null?0:author.getUserVisit()}"></span></strong>
                </div>
            </div>
            <div class="row" style="padding-bottom: 5px !important;padding-top: 5px !important;">
                <div class="column m-txt-align-left m-black">
                    积分：<strong><span class="m-margin-left"
                                     th:text="${author.getUserScore()==null?0:author.getUserScore()}"></span></strong>
                </div>
                <div class="column m-txt-align-left m-black">
                    排名：<strong><span class="m-margin-left"
                                     th:text="${author.getUserRank()==null?0:author.getUserRank()}">7</span></strong>
                </div>
            </div>
        </div>
    </div>
    <!--分类专栏-->
    <div th:if="${categories!=null&&!#lists.isEmpty(categories)}" class="ui segments user_info_sidebar menu-info-ctl" th:fragment="sidebar_category" >
        <div class="ui secondary segment" style="background: #f1f2fb">
            <div class="ui two column grid">
                <div class="column">
                    <i class="idea icon"></i><strong>分类专栏</strong>
                </div>
            </div>
        </div>
        <div class="ui segment" style="border-top: none;padding-top: .8em;padding-bottom: .8em;" th:each="category:${categories}">
            <!--专栏的图片-->
            <img class="ui middle aligned tiny image image-32x32" src="../../static/images/wechat.jpg" th:src="${category.categoryImageUrl}">
            <a href="#" th:href="@{/category/details/{id}/{user}(id=${category.categoryId},user=${category.categoryUser})}" target class="m-text-thin m-margin-left" style="color: #333;font-weight: 400 !important;" th:text="${category.categoryName}">2019年2月</a>
            <span class="count" style="float:right;">
                [[${category.categoryArticleNum}]]篇
            </span>
        </div>
    </div>
    <!--最新文章-->
    <div th:if="${newestArticles!=null&&!#lists.isEmpty(newestArticles)}" class="ui segments user_info_sidebar menu-info-ctl" th:fragment="sidebar_newest_article" >
        <div class="ui secondary segment " style="background: #f1f2fb">
            <i class="bookmark icon"></i><strong>最新文章</strong>
        </div>
        <div class="ui segment" style="border-top: none;padding-top: .8em;padding-bottom: .8em;" th:each="article:${newestArticles}">
            <a href="#" th:if="${article!=null}" th:href="@{/article/details/{id}(id=${article.getArticleId()})}" th:text="${article.getArticleTopic()}" class="m-text-thin" style="color: #333;font-weight: 400 !important;"></a>
        </div>
    </div>
    <!--归档-->
    <div th:if="${archives!=null&&!#lists.isEmpty(archives)}" id="archives"
         class="ui segments user_info_sidebar menu-info-ctl" th:fragment="sidebar_archives">
        <div class="ui secondary segment " style="background: #f1f2fb">
            <i class="bookmark icon"></i><strong>归档</strong>
        </div>
        <div class="ui segment" style="border-top: none;padding-top: .8em;padding-bottom: .8em;" th:each="archive:${archives}">
            <a href="#" th:href="@{/archives/details/{uid}/{date}(uid=${archive.userId},date=${archive.date})}" target="" class="m-text-thin" style="color: #333;font-weight: 400 !important;" th:text="${archive.date}"></a>
            <span class="count" style="float: right;">[[${archive.count}]]篇</span>
        </div>
    </div>
</div>
</body>
</html>